// 首页业务
// 页面一加载，ajax获取统计数据
// 把统计数据渲染到图表
// 页面一加载，ajax获取统计数据
// 页面dom + 外部资源
window.addEventListener('load', async function () {
    const { data } = await axios.get('/dashboard')
    console.log(data);
    overviewArr(data.data.overview)//获取数据预览的数据
    setLine(data.data.year)//获取折线图的数据
    setSalary(data.data.salaryData)//获取饼状图数据
    setGender(data.data.salaryData)//获取两个饼状图的数据
    setBar(data.data.groupData) //获取柱状图数据
    setMap(data.data.provinceData)//获取地图数据


})
const overviewArr = data => {
    console.log(data);
    Object.keys(data).forEach(item => {
        document.querySelector(`[name="${item}"]`).innerHTML = data[item]
    })
}
const setLine = data => {
    console.log(data);
    const xdata = data.map(item => item.month)
    const ydata = data.map(item => item.salary)
    // 初始化echarts
    const myChart = echarts.init(document.querySelector('#line'));

    // 指定图表的配置项和数据
    const option = {
        tooltip: {
            trigger: 'axis',
            position: function (pt) {
                return [pt[0], '10%'];
            }
        },
        title: {
            left: '20',
            top: "20",
            text: '2022全学科薪资走势'
        },

        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xdata
        },
        yAxis: {
            type: 'value',
            boundaryGap: [0, '100%']
        },

        series: [
            {
                name: '薪资',
                type: 'line',
                symbol: 'emptyCircle',
                symbolSize: "8",
                smooth: "true",
                sampling: 'lttb',
                itemStyle: {
                    color: 'rgb(156, 196, 246)'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0.5, 0, 0, [
                        {
                            offset: 0,
                            color: 'rgb(255, 255, 255)'
                        },
                        {
                            offset: 1,
                            color: 'rgb(145, 190, 244)'
                        }
                    ])
                },
                data: ydata
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    // 渲染到页面
    myChart.setOption(option);

}
const setSalary = data => {
    console.log(data);
    const salary = data.map(item => ({
        value: item.g_count + item.b_count,
        name: item.label

    }))

    const myChart = echarts.init(document.querySelector('#salary'));

    // 指定图表的配置项和数据
    const option = {
        title: [
            {
                text: '班级薪资分布',
                textStyle: {
                    fontSize: 16,
                    color: "black"
                },
                left: "2%",
                top: "20"
            },
        ],
        tooltip: {
            trigger: 'item',

        },
        // 种类分类
        legend: {
            // type:"scroll",
            // 设置显示的方向是水平还是垂直
            // orient: '',
            left: '10%',
            align: 'left',
            top: 'bottom',
            textStyle: {
                color: '#999'
            },

        },
        // 饼的样式
        series: [
            {
                name: '薪资',
                type: 'pie',
                // 圆心的位置
                center: ['50%', '50%'],
                // 内外圆的直径
                radius: ['35%', '55%'],
                clockwise: false, //饼图的扇区是否是顺时针排布
                // 避免数据过多的时候，文字被遮挡
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                // 
                label: {
                    normal: {
                        // 显示刻度
                        show: false,
                        position: 'outter',
                        formatter: function (parms) {
                            return parms.data.legendname
                        }
                    }
                },
                // 指示线
                labelLine: {
                    normal: {
                        // 指示线的长度
                        length: 5,
                        length2: 3,
                        // 可以变弯
                        smooth: true,
                    }
                },
                data: salary
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    // 渲染到页面
    myChart.setOption(option);
}
const setGender = data => {
    console.log(data);
    const gdata = data.map(item => ({
        value: item.g_count,
        name: item.label
    }))
    const bdata = data.map(item => ({
        value: item.b_count,
        name: item.label
    }))
    // 初始化echarts
    const myChart = echarts.init(document.querySelector('#gender'));

    // 指定图表的配置项和数据
    const option = {
        tooltip: {
            trigger: 'item'
        },
        title: [
            {
                text: "男女薪资分布",
                top: "20"

            },
            {
                text: "男",
                left: 'center',

                top: "45%",
                textStyle: {
                    color: '#333',
                    fontWeight: 'normal',
                    fontSize: 14
                }

            },
            {
                text: "女",
                left: 'center',
                top: "94%",
                textStyle: {
                    color: '#333',
                    fontWeight: 'normal',
                    fontSize: 14
                }
            }

        ],
        // legend: {
        //   top: '5%',
        //   left: 'center'
        // },
        color: ['rgba(255, 156, 4)', 'rgba(0, 214, 158)', 'rgba(23, 152, 255)', 'rgba(0, 190, 252)'],
        series: [
            {
                name: '女生薪资',
                type: 'pie',
                radius: ['20%', '30%'],
                center: ['50%', "25%"],
                avoidLabelOverlap: false,


                // emphasis: {
                //   label: {
                //     show: true,
                //     position: 'outter',
                //     fontSize: 40,
                //     fontWeight: 'bold'
                //   }
                // },
                labelLine: {
                    normal: {
                        // 指示线的长度
                        length: 30,
                        length2: 20,
                        // 可以变弯
                        smooth: false,
                    }
                },
                data: bdata
            },
            {
                name: '女生薪资',
                type: 'pie',
                radius: ['20%', '30%'],
                center: ['50%', "75%"],
                avoidLabelOverlap: false,


                // emphasis: {
                //   label: {
                //     show: true,
                //     position: 'outter',
                //     fontSize: 40,
                //     fontWeight: 'bold'
                //   }
                // },
                labelLine: {
                    normal: {
                        // 指示线的长度
                        length: 30,
                        length2: 20,
                        // 可以变弯
                        smooth: false,
                    }
                },
                data: gdata
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    // 渲染到页面
    myChart.setOption(option);

}
const setBar = data => {
    console.log(data);
    const nameArr = data[1].map(item => item.name)
    const hope_salaryArr = data[1].map(item => item.hope_salary)
    const salaryArr = data[1].map(item => item.salary)
    // 初始化echarts
    const myChart = echarts.init(document.querySelector('#lines'));

    // 指定图表的配置项和数据
    const option = {
        // 标题
        title: {
            text: "班级每组薪资"
        },
        // 鼠标移入提示
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        // 顶部圈圈的提示
        // legend: {},
        // 可以控制面板的大小,类似内边距
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        // x轴
        xAxis: [
            {
                type: 'category',
                data: nameArr
            }
        ],
        // y轴
        yAxis: [
            {
                type: 'value'
            }
        ],
        // 图表的内容
        series: [
            {
                name: 'Direct',
                type: 'bar',
                // emphasis: {
                //   focus: 'series',

                // },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#00dca7' },
                        { offset: 0.7, color: '#00e9c9' },
                        { offset: 1, color: '#9bf4e4' }
                    ])
                },
                data: hope_salaryArr
            },
            {
                name: 'Email',
                type: 'bar',
                // 堆叠柱子，相同stack值的会堆叠在一起
                stack: 'Ad',
                // 鼠标移入隐藏其他柱子自己高亮
                // emphasis: {
                //   focus: 'series'
                // },
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#01a7f0' },
                        { offset: 0.7, color: '#00c6f5' },
                        { offset: 1, color: '#c0e5f9' }
                    ])
                },
                data: salaryArr
            },

        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    // 渲染到页面
    myChart.setOption(option);
    document.querySelector('#btns').addEventListener('click', function (e) {
        if (e.target.tagName === "BUTTON") {
            document.querySelector('.btn-blue').classList.remove('btn-blue')
            e.target.classList.add('btn-blue')
            const nameArr = data[e.target.innerHTML].map(item => item.name)
            const hope_salaryArr = data[e.target.innerHTML].map(item => item.hope_salary)
            const salaryArr = data[e.target.innerHTML].map(item => item.salary)
            option.xAxis[0].data = nameArr
            option.series[0].data = hope_salaryArr
            option.series[1].data = salaryArr
            myChart.setOption(option);

        }
    })


}
const setMap = data => {
    // 3.1 基于准备好的dom，初始化echarts实例
    let myChart = echarts.init(document.querySelector('#map'));

    // 3.2 指定图表的配置项和数据
    const dataList = data

    // 数据设置
    dataList.forEach((item) => {
        // 数据里名字和上面的名字有点不太一样, 需要把多余的文字去掉(替换成空字符串)
        item.name = item.name.replace(/省|回族自治区|吾尔自治区|壮族自治区|特别行政区|自治区/g, '')
    })

    let option = {
        title: {
            text: '籍贯分布',
            top: 10,
            left: 10,
            textStyle: {
                fontSize: 16,
            },
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} 位学员',
            borderColor: 'transparent',
            backgroundColor: 'rgba(0,0,0,0.5)',
            textStyle: {
                color: '#fff',
            },
        },
        visualMap: {
            min: 0,
            max: 6,
            left: 'left',
            bottom: '20',
            text: ['6', '0'],
            inRange: {
                color: ['#ffffff', '#0075F0'],
            },
            show: true,
            left: 40,
        },
        geo: { // 地理坐标系组件
            map: 'china',
            roam: false,
            zoom: 1.0,
            label: {
                normal: {
                    show: true,
                    fontSize: '10',
                    color: 'rgba(0,0,0,0.7)',
                },
            },
            itemStyle: {
                normal: {
                    borderColor: 'rgba(0, 0, 0, 0.2)',
                    color: '#e0ffff',
                },
                emphasis: {
                    areaColor: '#34D39A',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
            },
        },
        series: [
            {
                name: '籍贯分布',
                type: 'map',
                geoIndex: 0,
                data: dataList,
            },
        ],
    }

    // 3.3使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
}